Day3. Express.js 介紹

14th鐵人賽

Yingge170

團隊來啊!打摳啊!

2022-09-07 13:03:25

795 瀏覽

分享至

Express 是一個簡潔、靈活且輕量的框架，定義了路由以用於執行不同的 Http 請求

使用回調函數的參數包括:

req(Request) : 表示 Http 請求，包含查詢字符、參數、內容等，常見屬性有req.body、req.path、req.query、req.params。
res(Response) : 表示 Http 響應，在接收到請求時向客戶端發送http響應數據，常見屬性有res.append、res.json、res.redirect、res.send
next : 在定義中介函數時通常以名為 next 的變數表示，用來確保程式會一個接一個的執行。

index.js

在 index.js 裡定義了路由模組
router.get() 函數僅回應具有指定URL路徑'/'的 http get 請求，
res.render() 函數用於呈現頁面 index.ejs 及傳遞參數 title:'Express'

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

index.ejs

index.ejs 基本寫法與 HTML 相同，在首頁中修改 css 檔及新增按鈕，當按下按鈕就會根據 action 所設定的參數對應 index.js 內所設定的 router 渲染頁面

<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/home.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <br>
    <div class="parent">
      <div class="left">
        <form method="GET" action="/Day3">
          <input type="submit" value="Day3">
        </form>
       </div>
      </div>
  </body>
</html>

Home.css

body {
    margin: 0%;
    font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 5px 0px 0px;
}

h1 {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
    color: rgb(13, 83, 83);
}

form {
    text-align: center;
}

input {
    font-size: 15px;
    height: 50px;
    width: 100px;
}

.left{
	position: relative;
	float:left;
	height: 350px;
	width: 150px;
}

.center{
	position: relative;
	float: left;
	height: 350px;
	width: 150px;
}

.right{
	position: relative;
	float: left;
	height: 350px;
	width: 150px;
}